<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能工业手势识别系统</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="/static/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>

<body>
    <!-- 侧边栏 -->
    <div class="sidebar">
        <div class="sidebar-header">
            <div class="sidebar-title">
                智能工业手势识别
            </div>
            <div class="user-info">
                <!-- 显示当前用户名 -->
                <span class="username">{{ current_user.username }}</span>
                <!-- 退出登录链接 -->
                <a href="{{ url_for('auth.logout_route') }}" class="logout">退出登录</a>
            </div>
        </div>
        <ul class="nav-menu">
            <!-- 根据用户角色显示不同的导航项 -->
            {% if session.role != 'admin' %}
                <li class="nav-item" onclick="window.location.href='{{ url_for('main.profile') }}'">个人信息</li>
                <li class="nav-item active">实时识别</li>
                <li class="nav-item" onclick="window.location.href='{{ url_for('gesture.gesture_config') }}'">手势配置</li>
                <li class="nav-item" onclick="window.location.href='{{ url_for('gesture.history') }}'">历史记录</li>
            {% else %}
                <li class="nav-item" onclick="window.location.href='{{ url_for('user.user_management') }}'">角色管理</li>
                <li class="nav-item" onclick="window.location.href='{{ url_for('user.user_records') }}'">识别记录</li>
            {% endif %}
        </ul>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
        <div class="main-container">
            <!-- 内容包装器，包含视频区域和右侧内容区域 -->
            <div class="content-wrapper">
                <!-- 视频区域 -->
                <div class="video-section">
                    <!-- 手势识别视频流 -->
                    <div class="video-container">
                        <img src="/video_feed" alt="手势识别视频流" class="img-fluid">
                    </div>
                    <!-- 指令视频 -->
                    <div class="video-container">
                        <video id="instruction-video" controls muted>
                            <source src="/static/videos/nailong1.mp4" type="video/mp4">
                            您的浏览器不支持视频播放。
                        </video>
                    </div>
                </div>

                <!-- 右侧内容区域 -->
                <div class="content-section">
                    <!-- 切换按钮 -->
                    <div class="panel-tabs">
                        <button class="tab-btn active" data-panel="gesture-info">
                            <i class="fas fa-hand-paper"></i>
                            当前手势信息
                        </button>
                        <button class="tab-btn" data-panel="gesture-library">
                            <i class="fas fa-book"></i>
                            手势指令库
                        </button>
                    </div>

                    <!-- 当前手势信息面板 -->
                    <div class="panel active" id="gesture-info">
                        <div class="panel-header">
                            <div class="panel-title">
                                <span>当前手势信息</span>
                            </div>
                        </div>

                        <!-- 识别到的手势显示 -->
                        <div class="gesture-display">
                            <div class="gesture-label">
                                <i class="fas fa-hand-paper"></i>
                                识别到的手势
                            </div>
                            <div class="gesture-value empty" id="current-gesture">等待识别...</div>
                        </div>

                        <!-- 手势对应指令显示 -->
                        <div class="gesture-display">
                            <div class="gesture-label">
                                <i class="fas fa-terminal"></i>
                                手势对应指令
                            </div>
                            <div class="gesture-value empty" id="current-content">请做出已配置手势</div>
                        </div>
                    </div>

                    <!-- 手势指令库面板 -->
                    <div class="panel" id="gesture-library">
                        <div class="panel-header">
                            <div class="panel-title">
                                <span>自定义手势指令库</span>
                                <span class="badge">1 - 5号手势</span>
                            </div>
                        </div>

                        <div class="all-contents" id="all-contents">
                            <!-- 动态内容将通过JavaScript填充 -->
                        </div>
                    </div>
                </div>
            </div>

            <!-- 添加统计框 -->
            <div class="stats-section">
                <div class="stats-container">
                    <div class="stats-header">
                        <i class="fas fa-chart-bar"></i>
                        <span>手势识别统计</span>
                    </div>
                    <div class="stats-content">
                        <!-- 手势1统计 -->
                        <div class="stats-item">
                            <span class="stats-label">手势 1</span>
                            <span class="stats-value" id="gesture-1-count">0</span>
                            <span class="stats-unit">次</span>
                        </div>
                        <!-- 手势2统计 -->
                        <div class="stats-item">
                            <span class="stats-label">手势 2</span>
                            <span class="stats-value" id="gesture-2-count">0</span>
                            <span class="stats-unit">次</span>
                        </div>
                        <!-- 手势3统计 -->
                        <div class="stats-item">
                            <span class="stats-label">手势 3</span>
                            <span class="stats-value" id="gesture-3-count">0</span>
                            <span class="stats-unit">次</span>
                        </div>
                        <!-- 手势4统计 -->
                        <div class="stats-item">
                            <span class="stats-label">手势 4</span>
                            <span class="stats-value" id="gesture-4-count">0</span>
                            <span class="stats-unit">次</span>
                        </div>
                        <!-- 手势5统计 -->
                        <div class="stats-item">
                            <span class="stats-label">手势 5</span>
                            <span class="stats-value" id="gesture-5-count">0</span>
                            <span class="stats-unit">次</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 添加统计相关的变量
        const gestureCounts = {
            "1": 0,
            "2": 0,
            "3": 0,
            "4": 0,
            "5": 0
        };

        // 更新统计信息
        function updateStats(gesture, success) {
            if (gesture && ["1", "2", "3", "4", "5"].includes(gesture) && success) {
                gestureCounts[gesture]++;
                document.getElementById(`gesture-${gesture}-count`).textContent = gestureCounts[gesture];
            }
        }

        // updateDisplay函数
        function updateDisplay() {
            fetch('/get_gesture')
              .then(response => response.json())
              .then(data => {
                    const gesture = data.gesture;
                    const success = data.success;
                    const gestureElement = document.getElementById('current-gesture');
                    const contentElement = document.getElementById('current-content');

                    // 更新统计信息
                    updateStats(gesture, success);

                    // 更新显示逻辑
                    if (gesture && ["1", "2", "3", "4", "5"].includes(gesture)) {
                        fetch('/get_contents')
                          .then(response => response.json())
                          .then(contents => {
                                const currentContent = contents[gesture] || "未设置指令";

                                gestureElement.textContent = `手势 ${gesture}`;
                                gestureElement.classList.remove('empty');
                                gestureElement.classList.add('active');

                                contentElement.textContent = currentContent;
                                contentElement.classList.remove('empty');
                                contentElement.classList.add('active');

                                gestureElement.classList.add('pulse');
                                setTimeout(() => gestureElement.classList.remove('pulse'), 1500);

                                // 当识别到手势时播放视频
                                if (currentContent && currentContent.startsWith('video:')) {
                                    const video = document.getElementById('instruction-video');
                                    const videoUrl = currentContent.replace('video:', '');
                                    if (video.src !== videoUrl) {
                                        video.src = videoUrl;
                                    }
                                    video.muted = false; // 取消静音
                                    video.currentTime = 0;
                                    const playPromise = video.play();
                                    if (playPromise !== undefined) {
                                        playPromise.then(() => {
                                            console.log('视频开始播放');
                                        }).catch(error => {
                                            console.log('视频播放失败:', error);
                                            // 如果播放失败，尝试静音播放
                                            video.muted = true;
                                            video.play();
                                        });
                                    }
                                }

                                updateGestureContents(gesture, contents);
                            });
                    } else {
                        gestureElement.textContent = "等待识别...";
                        gestureElement.classList.add('empty');
                        gestureElement.classList.remove('active');

                        contentElement.textContent = "请做出已配置手势";
                        contentElement.classList.add('empty');
                        contentElement.classList.remove('active');
                    }
                });
        }

        // 分离手势内容更新逻辑
        function updateGestureContents(currentGesture, contents) {
            const allContentsElement = document.getElementById('all-contents');
            let html = '';

            for (let i = 1; i <= 5; i++) {
                const gestureKey = i.toString();
                const isActive = gestureKey === currentGesture;
                const content = contents[gestureKey] || "未设置指令";

                html += `
                    <div class="gesture-item ${isActive ? 'active' : ''}">
                        <div class="gesture-item-title">
                            <span class="badge">手势 ${gestureKey}</span>
                        </div>
                        <div class="gesture-item-content">
                            ${content}
                        </div>
                    </div>
                `;
            }

            allContentsElement.innerHTML = html;
        }

        // 设置2秒的更新间隔，与后端保持一致
        setInterval(updateDisplay, 2000);
    </script>
</body>
</html>